<template>
	<div ref="chartBarLine" style="width: 100%; height: 100%" v-if="eventModuleStats"></div>
</template>

<script>
export default {
	name: 'barLine',
	props: {
		eventModuleStats: {
			type: Object,
		},
		echarts: {
			type: Object,
		},
	},
	watch: {
		eventModuleStats: {
			handler(newVal, oldVal) {
				this.updateChart();
			},
			deep: true, // 开启深度监听
		},
	},
	created() {},
	mounted() {
		this.initChart();
	},
	data() {
		return {
			salvProNameList: [
				{
					module: 1,
					name: '首页',
					totalCount: '0',
				},
				{
					module: 2,
					name: '短剧',
					totalCount: '0',
				},
				{
					module: 3,
					name: '小说',
					totalCount: '0',
				},
				{
					module: 4,
					name: '个人中心',
					totalCount: '0',
				},
				{
					module: 5,
					name: '文章',
					totalCount: '0',
				},
				{
					module: 6,
					name: '短视频',
					totalCount: '0',
				},
				{
					module: 7,
					name: '直播',
					totalCount: '0',
				},
				{
					module: 8,
					name: 'AI',
					totalCount: '0',
				},
			],
		};
	},
	methods: {
		initChart() {
			this.chartDom = this.$refs.chartBarLine;
			this.myChart = this.$echarts.init(this.chartDom);
			var newFontSize = (window.innerWidth * 0.04) / 6;
			this.wgx1 = [];
			this.salvProName = [];
			for (let salvProItem of this.salvProNameList) {
				for (let item of this.eventModuleStats) {
					if (salvProItem.module == item.module) {
						salvProItem.totalCount = item.totalCount;
					}
				}
			}
			this.salvProNameList.sort((a, b) => b.totalCount - a.totalCount);
			for (let salvProItem of this.salvProNameList) {
				this.wgx1.push(salvProItem.totalCount);
				this.salvProName.push(salvProItem.name);
			}
			let barWidth = newFontSize * 1.5;

			this.option = {
				animation: true, // 直接在配置中设置 animation 为 false
				notMerge: false,
				lazyUpdate: false,
				textStyle: {
					fontSize: newFontSize, // 全局字体大小调整
				},
				// backgroundColor: "#010243",
				tooltip: {
					trigger: 'axis',
					backgroundColor: '#fff',
					border: 'none',
					extraCssText: 'background: linear-gradient(to right, #286CE9, #01D1FF);',
					textStyle: {
						color: '#FFF',
						fontSize: newFontSize, // 全局字体大小调整
					},
					axisPointer: {
						// 坐标轴指示器，坐标轴触发有效
						type: 'line', // 默认为直线，可选为：'line' | 'shadow'
						label: {
							show: true,
							backgroundColor: '#7B7DDC',
						},
					},
					formatter: function (params) {
						return params[0].name + ' : ' + params[0].value + '次';
					},
				},
				grid: {
					left: '5%',
					right: '5%',
					bottom: '5%',
					top: '25%',
					containLabel: true,
				},

				xAxis: {
					type: 'category',
					data: this.salvProName,
					// data: ['小说', '短视频', '文章', '短剧', '国内', '股票', '娱乐'],
					axisLine: {
						show: true,
						lineStyle: {
							color: '#15205B',
						},
					},
					axisTick: {
						show: true,
					},
					axisLabel: {
						interval: 0,
						fontFamily: 'Microsoft YaHei',
						color: '#4FA1C1', // x轴颜色
						fontWeight: 'normal',
						fontSize: newFontSize,
						interval: 0, //标签设置为全部显示
					},
				},

				yAxis: {
					type: 'value',
					axisLine: {
						show: true,
						lineStyle: {
							color: '#15205B',
						},
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: '#65C6E7', //左侧显示线
							opacity: 0.2,
						},
					},
					axisTick: {
						show: true,
					},

					axisLabel: {
						formatter: '{value}',
						color: '#00f8ff',
						fontSize: newFontSize,
					},
				},
				series: [
					// 实际产值中间正方形
					{
						type: 'pictorialBar',
						symbol: 'diamond',
						symbolSize: [barWidth, barWidth - barWidth * 1.39],
						symbolOffset: [0, 0],
						symbolPosition: 'end',
						z: 12,
						color: '#00f8ff',
						data: this.wgx1,
						// data: [19, 29, 39, 81, 56, 56, 56],
					},

					// 实际产值底部正方形
					{
						name: '',
						type: 'pictorialBar',
						symbol: 'diamond',
						symbolSize: [barWidth, barWidth - barWidth * 1.39],
						symbolOffset: [0, 0],
						color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{
								offset: 0,
								color: '#005559',
							},
							{
								offset: 1,
								color: '#01F0FF',
							},
						]),
						z: 12,
						data: this.wgx1,
						// data: [19, 29, 39, 81, 56, 56, 56],
					},

					// 实际产值进度柱子
					{
						name: '点击次数',
						type: 'bar',
						stack: '1',
						barWidth: barWidth,
						itemStyle: {
							opacity: 0.7,
							color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset: 1,
									color: '#005559',
								},
								{
									offset: 0,
									color: '#01F0FF',
								},
							]),
							borderRadius: 0,
						},
						data: this.wgx1,
						// data: [19, 29, 39, 81, 56, 56, 56],
					},
				],
			};

			this.myChart.setOption(this.option);
			this.$nextTick(() => {
				this.resize(this.myChart);
			});
		},
		resize(myChart) {
			window.addEventListener('resize', () => {
				let FontSize = (window.innerWidth * 0.04) / 6;
				let barWidth = FontSize * 1.5;
				let newOption = {
					textStyle: {
						fontSize: FontSize * 0.8, // 应用新的字体大小
					},
					tooltip: {
						textStyle: {
							fontSize: FontSize, // 全局字体大小调整
						},
					},
					xAxis: [
						{
							axisLabel: {
								fontSize: FontSize,
							},
						},
					],
					yAxis: [
						{
							axisLabel: {
								fontSize: FontSize,
							},
						},
						{
							axisLabel: {
								fontSize: FontSize,
							},
						},
					],
					series: [
						// 实际产值中间正方形
						{
							symbolSize: [barWidth, barWidth - barWidth * 1.39],
						},

						{
							symbolSize: [barWidth, barWidth - barWidth * 1.39],
						},

						// 实际产值进度柱子
						{
							barWidth: barWidth,
						},
					],
				};
				this.option = { ...this.option, ...newOption };
				myChart.setOption(this.option);
				myChart.resize();
			});
		},
		updateChart() {
			// 这里可以处理变化
			this.wgx1 = [];
			for (let salvProItem of this.salvProNameList) {
				for (let item of this.eventModuleStats) {
					if (salvProItem.module == item.module && salvProItem.totalCount != item.totalCount) {
						salvProItem.totalCount = item.totalCount;
					}
				}
				this.wgx1.push(salvProItem.totalCount);
			}
			this.option.series[0].data = [...this.wgx1];
			this.option.series[1].data = [...this.wgx1];
			this.option.series[2].data = [...this.wgx1];
			this.option.animation = false;
			this.myChart.setOption(this.option);
		},
	},
};
</script>
<style scoped lang="scss">
.mapDom {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.echarts {
	display: flex;
	align-items: center;

	.echartsLeft {
		width: auto;
		background-image: linear-gradient((#063053, 0.3), (#395873, 0.3), (#5c7c99.3));
	}

	.echartsRight {
		width: auto;
		background-color: #000;
	}

	.echartsCenter {
		flex: 1;
		background-color: #000;
	}
}
</style>
